<template>
    <ak-header data-display="true">
        <button type="button" class="left_0 w_25 pl_3 text_al_l fs_12rem" data-href="javascript:history.back();"><i class="fs_14rem icon-ln_fanhui_b"></i>返回</button>
        <h1 class="text_al_c">布局展示</h1>
        <button type="button" class="right_0 w_25 pr_3 text_al_r fs_12rem" id="plug_Share">分享</button>
    </ak-header>

    <ak-main data-bounce="false">
        <!----------AKjs_NavScroll---------->
        <div class="plug_tabs_find module press">
            <nav class="pos_rel z_index_2 ovh h_3rem bg_white bor_bottom bor_gray_ddd">
                <ul class="ml_05rem top_0 pos_abs z_index_2 text_nowrap scrolling_touch">
                    <li class="dis_inbl mr_1rem line_h_26rem fs_12rem text_al_c c_theme">头条</li>
                    <li class="dis_inbl mr_1rem line_h_26rem fs_12rem text_al_c">体育</li>
                    <li class="dis_inbl mr_1rem line_h_26rem fs_12rem text_al_c">娱乐</li>
                    <li class="dis_inbl mr_1rem line_h_26rem fs_12rem text_al_c">要闻</li>
                    <li class="dis_inbl mr_1rem line_h_26rem fs_12rem text_al_c">财经</li>
                    <li class="dis_inbl mr_1rem line_h_26rem fs_12rem text_al_c">科技</li>
                    <li class="dis_inbl mr_1rem line_h_26rem fs_12rem text_al_c">汽车</li>
                    <li class="dis_inbl mr_1rem line_h_26rem fs_12rem text_al_c">时尚</li>
                    <li class="dis_inbl mr_1rem line_h_26rem fs_12rem text_al_c">房产</li>
                    <li class="dis_inbl mr_1rem line_h_26rem fs_12rem text_al_c">本地</li>
                </ul>
            </nav>
        </div>

        <!--ak-main元素里面的ak-scrollview"是用于屏幕的滚动条，不使用当前元素时ak-main自动识别为屏幕的滚动条。弹窗或固定元素的代码在ak-scrollview的外面写才能不飘动。-->
        <ak-scrollview data-bounce="true">
            <div class="module press">
                <article class="plug_tabs_findview pos_rel ovh bg_white h_8rem">
                    <div class="fl">
                        <section class="pa_3 line_h_16rem">【头条新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16rem">【体育新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16rem">【娱乐新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16rem">【要闻新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16rem">【财经新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16rem">【科技新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16rem">【汽车新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16rem">【时尚新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16rem">【房产新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                    <div class="fl">
                        <section class="pa_3 line_h_16rem">【本地新闻】AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</section>
                    </div>
                </article>
            </div>

            <div class="module mt_5 press">
                <ul>
                    <li class="bg_white pos_rel ovh"><!--可循环-->
                        <dl class="pos_rel h_in ovh list_h_36rem wp_94 bor_bottom bor_gray_ddd touchstart" data-href="/page3">
                            <dt class="fl c_theme">列表布局展示</dt>
                            <dd class="fr pos_rel mr_7">
                                <span class="fr c_orange ml_05rem">状态</span>
                            </dd>
                            <dd class="pos_abs top_0 right_0 mr_3">
                                <i class="fr icon-ln_qianjin_b fs_16rem c_gray_777"></i>
                            </dd>
                        </dl>
                        <dl class="wm_94 ovh pt_1rem pb_1rem bor_bottom_dashed bor_gray_ddd">
                            <dt class="fl pos_rel ovh h_in w_50">
                                <em class="fl mr_03rem">姓名：</em>
                                <span class="fl h_in line_h_in c_gray_777">安德鲁</span>
                            </dt>
                            <dd class="fl pos_rel ovh h_in w_50">
                                <em class="fl mr_03rem">性别：</em>
                                <span class="fl h_in line_h_in c_gray_777">男</span>
                            </dd>
                        </dl>
                        <dl class="wm_94 ovh pt_1rem pb_1rem bor_bottom_dashed bor_gray_ddd">
                            <dt class="fl pos_rel ovh h_in mr_03rem">邮箱：</dt>
                            <dd class="fl pos_rel ovh h_in c_gray_777"><a href="mailto:andrewkim365@qq.com">andrewkim365@qq.com</a></dd>
                        </dl>
                        <dl class="wm_94 ovh pt_1rem pb_1rem bor_bottom_dashed bor_gray_ddd">
                            <dt class="fl pos_rel ovh h_in mr_03rem">手机号码：</dt>
                            <dd class="fl pos_rel ovh h_in c_gray_777"><a href="tel:133-3333-3333">133-3333-3333</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>

            <form action="#" method="get">
                <div class="module mt_5">
                    <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">正则表达式 (data-type)</h3>
                    <ul class="wp_94 press bg_white list_h_36rem">
                        <li class="pos_rel bor_bottom bor_gray_ddd">
                            <label class="dis_block pos_rel ovh fl w_28 mr_1 text_al_r line_h_in">数字：</label>
                            <input type="number" data-type="number" class="fl w_70 c_gray_777" required value="" placeholder="只允许输入数字" />
                        </li>
                        <li class="pos_rel bor_bottom bor_gray_ddd">
                            <label class="dis_block pos_rel ovh fl w_28 mr_1 text_al_r line_h_in">数字+小数点：</label>
                            <input type="number" data-type="number_symbol" class="fl w_70 c_gray_777" required value="" placeholder="只允许输入数字和小数点" />
                        </li>
                        <li class="pos_rel bor_bottom bor_gray_ddd">
                            <label class="dis_block pos_rel ovh fl w_28 mr_1 text_al_r line_h_in">字母：</label>
                            <input type="text" data-type="alpha" class="fl w_70 c_gray_777" required value="" placeholder="只允许输入英文字母" />
                        </li>
                        <li class="pos_rel bor_bottom bor_gray_ddd">
                            <label class="dis_block pos_rel ovh fl w_28 mr_1 text_al_r line_h_in">字母+数字：</label>
                            <input type="text" data-type="alpha_number" class="fl w_70 c_gray_777" required value="" placeholder="只允许输入英文字母和数字" />
                        </li>
                        <li class="pos_rel bor_bottom bor_gray_ddd">
                            <label class="dis_block pos_rel ovh fl w_28 mr_1 text_al_r line_h_in">汉字：</label>
                            <input type="text" data-type="sino" class="fl w_70 c_gray_777" required value="" placeholder="只允许输入汉字" />
                        </li>
                        <li class="pos_rel bor_bottom bor_gray_ddd">
                            <label class="dis_block pos_rel ovh fl w_28 mr_1 text_al_r line_h_in">汉字+字母：</label>
                            <input type="text" data-type="sino_alpha" class="fl w_70 c_gray_777" required value="" placeholder="只允许输入汉字和英文字母" />
                        </li>
                    </ul>
                </div>
            </form>

            <form action="#" method="get">
                <div class="module mt_5">
                    <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">表单布局（左对齐）</h3>
                    <ul class="wp_94 press bg_white list_h_36rem">
                        <li class="pos_rel bor_bottom bor_gray_ddd">
                            <label class="dis_block pos_rel ovh fl text_ind_2rem mr_1rem line_h_in">姓名</label>
                            <input type="text" class="fl w_75 c_gray_777 plug_Delete" required value="" maxlength="6" placeholder="请输入真实姓名" />
                        </li>
                        <li class="pos_rel bor_bottom bor_gray_ddd">
                            <label class="dis_block pos_rel ovh fl mr_1rem line_h_in">手机号码</label>
                            <input type="tel" class="fl w_75 c_gray_777 plug_Delete" required value="" maxlength="11" placeholder="请输入手机号码" data-type="number" />
                        </li>
                        <li class="pos_rel bor_bottom bor_gray_ddd">
                            <label class="dis_block pos_rel ovh fl pl_2rem mr_1rem line_h_in">性别</label>
                            <span class="fl c_gray_777">男</span>
                        </li>
                    </ul>
                    <button type="button" class="plug_print btn_h_32rem wm_94 bg_theme c_white mt_5">打印</button>
                </div>
            </form>

            <!----------AKjs_SelectOption---------->
            <div class=" module mt_5 bg_white">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">select下拉框功能</h3>
                <article class="wp_94 pt_3 pb_3">
                    <!--赋值select-->
                    <select class="plug_select w_8rem h_3rem line_h_28rem c_gray_777 bor_rad_05rem bor_gray_ddd border bg_gray_f5f">
                        <option value="0">请选择</option>
                        <option value="1">北京</option>
                        <option value="2" selected>上海</option>
                        <option value="3">广州</option>
                        <option value="4">深圳</option>
                        <option value="5">天津</option>
                        <option value="6">苏州</option>
                        <option value="7">杭州</option>
                        <option value="8">南京</option>
                        <option value="9">青岛</option>
                    </select>
                    <!--路由跳页select 方法：data-type="router-link"-->
                    <select data-type="router-link" class="plug_select w_8rem h_3rem line_h_28rem c_gray_777 bor_rad_05rem bor_gray_ddd border bg_gray_f5f">
                        <option value="0">请选择</option>
                        <option value="page2">聊天</option>
                        <option value="page3">瀑布流</option>
                    </select>
                    <!--普通跳转select 方法：data-type="link"-->
                    <select data-type="link" class="plug_select w_8rem h_3rem line_h_28rem c_gray_777 bor_rad_05rem bor_gray_ddd border bg_gray_f5f">
                        <option value="0">请选择</option>
                        <option value="http://www.baidu.com">百度</option>
                        <option value="http://www.taobao.com">淘宝</option>
                    </select>
                </article>
            </div>

            <!----------AKjs_Vticker---------->
            <div class="module mt_5 bg_white h_18_rem">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">列表滚动展示</h3>
                <div class="plug_vticker pb_02rem pos_rel ovh">
                    <ul class="left_3 w_94 list_h_36rem pos_abs">
                        <li class="bor_bottom bor_gray_ddd line_h_34rem">1、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                        <li class="bor_bottom bor_gray_ddd line_h_34rem">2、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                        <li class="bor_bottom bor_gray_ddd line_h_34rem">3、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                        <li class="bor_bottom bor_gray_ddd line_h_34rem">4、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                        <li class="bor_bottom bor_gray_ddd line_h_34rem">5、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                        <li class="bor_bottom bor_gray_ddd line_h_34rem">6、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                        <li class="bor_bottom bor_gray_ddd line_h_34rem">7、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                        <li class="bor_bottom bor_gray_ddd line_h_34rem">8、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                        <li class="bor_bottom bor_gray_ddd line_h_34rem">9、欢迎使用AKjs移动端前端UI框架（jQuery插件）</li>
                    </ul>
                </div>
            </div>

            <!----------AKjs_ReadMore---------->
            <div class="module mt_5 bg_white">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">查看更多内容插件</h3>
                <article class="plug_readmore wp_94 pt_3 line_h_18rem dis_none">
                    <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                    <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                    <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                    <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                    <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                    <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                    <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                </article>
            </div>

            <!----------AKjs_Circliful---------->
            <div class="module mt_5 press bg_white">
                <h3 class="bg_white c_theme pl_3 mb_2 line_h_36rem bor_bottom bor_gray_ddd">圆形统计插件</h3>
                <div class="plug_circliful fl" data-dimension="120" data-text="35%" data-info="当前进度" data-width="10" data-font_size="1.2rem" data-percent="35" data-prog_color="#4cafe9" data-bg_color="#dddddd" data-font_color="#ffffff" data-fill_color="#999999"></div>
                <div class="plug_circliful fl" data-dimension="120" data-text="65%" data-info="当前进度" data-width="10" data-font_size="1.2rem" data-percent="65" data-prog_color="#19d100" data-bg_color="#dddddd"></div>
                <div class="plug_circliful fl" data-dimension="120" data-text="85%" data-info="当前进度" data-width="10" data-font_size="1.2rem" data-percent="85" data-prog_color="#d94945" data-bg_color="#dddddd" data-type="spacing" data-font_color="#ffffff" data-spacing_color="#ff7e00"></div>
            </div>

            <!----------AKjs_Marquee---------->
            <div class="module press mt_5 bg_white">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">滚动展示</h3>
                <section class="plug_marquee mt_3 mb_3" style="height: 80px">
                    <div class="wm_96 ovh mb_1rem line_h_2rem c_gray_777">
                        <p>AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。</p>
                    </div>
                </section>
            </div>

            <div class="module press mt_5 bg_white plug_lazyload">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">图片加载失败展示</h3>
                <section class="wm_96 ovh mb_1rem line_h_2rem c_gray_777">
                    <img data-src="./img/akjs" /> <!--输入无效的图片地址-->
                </section>
            </div>

            <div class="module press mt_5 bg_white">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">表格样式</h3>
                <section class="wm_94 pt_3 pb_3 ovh pos_rel">
                    <table class="bor_top bor_bottom bor_gray_ddd">
                        <thead class="c_theme text_al_c list_h_3rem bor_top2 bor_theme">
                        <tr>
                            <th class="font_bold">标题A</th>
                            <th class="font_bold">标题B</th>
                            <th class="font_bold">标题C</th>
                            <th class="font_bold">标题D</th>
                        </tr>
                        </thead>
                        <tbody class="c_gray_777 text_al_c list_h_36rem list_f9f_white bor_top bor_gray_ddd">
                        <tr class="bor_bottom bor_gray_ddd">
                            <td>内容1-1</td>
                            <td>内容1-2</td>
                            <td>内容1-3</td>
                            <td>内容1-4</td>
                        </tr>
                        <tr class="bor_bottom bor_gray_ddd">
                            <td>内容2-1</td>
                            <td>内容2-2</td>
                            <td>内容2-3</td>
                            <td>内容2-4</td>
                        </tr>
                        <tr class="bor_bottom bor_gray_ddd">
                            <td>内容3-1</td>
                            <td>内容3-2</td>
                            <td>内容3-3</td>
                            <td>内容3-4</td>
                        </tr>
                        <tr class="bor_bottom bor_gray_ddd">
                            <td>内容4-1</td>
                            <td>内容4-2</td>
                            <td>内容4-3</td>
                            <td>内容4-4</td>
                        </tr>
                        </tbody>
                    </table>
                </section>
            </div>

            <!----------AKjs_Paginator---------->
            <div class="module press mt_5">
                <ul id="plug_page"></ul>
            </div>

            <!----------AKjs_Template---------->
            <div class="module mt_5 ovh pos_rel">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">图片列表展示</h3>
                <ul class="plug_for ak-for"><!--加ak-for让加载体验效果更加的完美-->
                    <li class="pos_rel ovh bg_white pa_3 bor_bottom bor_gray_ddd touchstart" data-href="/page3">
                        <figure class="fl bg_gray_f5f border bor_gray_ddd wh_6rem img_auto">
                            {{html Image}}
                        </figure>
                        <div class="fl list_h_18rem ml_1rem ovh w_65">
                            <h3 class="fs_12rem">
                                ${id}.
                                {{if Title}}
                                ${$data.Title}
                                {{else}}
                                无标题
                                {{/if}}
                            </h3>
                            <p class="c_gray_777">
                                <del class="vert_al_t">${Price}</del>
                            </p>
                            <p class="c_gray_999 text_hidden">${$item.getContent('--')}</p>
                            <p class="c_gray_999 text_hidden">{{each Content}} ${$value}  {{/each}}</p>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="module press mt_5 bg_white">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">功能布局</h3>
                <ul class="ovh list_h_8rem verline_list length3">
                    <li class="fl pos_rel text_al_c touchstart">
                        <button type="button" class="dis_block ovh w_100" data-href="/page3">
                            <label class="bg_theme bor_rad_50 c_white wh_4rem mt_05rem center">
                                <i class="text_al_c vert_al_t line_h_4rem fs_24rem icon-xt_pingguo"></i>
                            </label>
                            <span class="dis_block text_al_c line_h_2rem">Apple</span>
                        </button>
                    </li>
                    <li class="fl pos_rel text_al_c touchstart">
                        <button type="button" class="dis_block ovh w_100" data-href="/page3">
                            <label class="bg_theme bor_rad_50 c_white wh_4rem mt_05rem center">
                                <i class="text_al_c vert_al_t line_h_4rem fs_24rem icon-xt_anzhuo"></i>
                            </label>
                            <span class="dis_block text_al_c line_h_2rem">Android</span>
                        </button>
                    </li>
                    <li class="fl pos_rel text_al_c touchstart">
                        <button type="button" class="dis_block ovh w_100" data-href="/page3">
                            <label class="bg_theme bor_rad_50 c_white wh_4rem mt_05rem center">
                                <i class="text_al_c vert_al_t line_h_4rem fs_24rem icon-xt_weiruan"></i>
                            </label>
                            <span class="dis_block text_al_c line_h_2rem">Windows</span>
                        </button>
                    </li>
                </ul>
            </div>

            <!----------AKjs_QRcode---------->
            <div class="module mt_5 press bg_white">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">二维码生成插件</h3>
                <div class="plug_qrcode pa_3 text_al_c"></div>
            </div>

            <div class="module mt_5 press">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">时间轴布局展示</h3>
                <div class="plug_timeaxis"></div>
            </div>

            <div class="module mt_5 press">
                <h3 class="wp_94 bg_white line_h_36rem font_bold bor_bottom_dashed bor_gray_ddd c_theme"><i class="icon-yk_xinxi_fill vert_al_s fs_14rem mr_02rem"></i> 详情描述展示</h3>
                <p class="wp_94 bg_white pb_3 pt_3 line_h_2rem c_gray_777 text_hidden text_hidden_line5">
                    AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。
                    AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。
                    AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。
                </p>
            </div>

            <div class="module mt_5 bg_white pt_3 wp_94">
                <div id="plug_echarts1"></div>
                <div id="plug_echarts2"></div>
            </div>

            <!----------AKjs_TypeIt---------->
            <!--<div class="module mt_5 press bg_white">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">文字打字效果</h3>
                <section class="pa_2 h_8rem">
                    <span class="plug_TypeIt line_h_24rem"></span>
                </section>
            </div>-->
            <div class="module mt_5 bg_white">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">文字和布局的居中方法</h3>
                <ul class="ud_ele_c w_100 h_16_rem"><!--ud_ele_c里面的所有li标签自动上下居中到ul标签中-->
                    <li class="wm_94 h_3rem bg_theme bor_white bor_bottom2">
                        <span class="ud_text_c c_white"><!--通过ud_text_c在li标签中上下居中-->
                            元素上下对齐 （.ud_ele_c）
                        </span>
                    </li>
                    <li class="wm_94 h_3rem bg_theme bor_white bor_bottom2">
                        <span class="ud_text_c c_white w_100"><!--通过ud_text_c在li标签中上下居中-->
                            文字上下对齐 （.ud_text_c）
                        </span>
                    </li>
                    <li class="w_80 center h_3rem bg_theme bor_white bor_bottom2"><!--center是元素左右居中（需要有宽度）-->
                        <span class="ud_text_c text_al_c c_white w_100"><!--通过ud_text_c在li标签中上下居中,text_al_c是左右居中-->
                            元素左右对齐 （.center）
                        </span>
                    </li>
                    <li class="wm_94 h_3rem bg_theme bor_white bor_bottom2">
                        <span class="ud_text_c text_al_c c_white w_100"><!--通过ud_text_c在li标签中上下居中,text_al_c是左右居中-->
                            文字左右对齐 （.text_al_c）
                        </span>
                    </li>
                </ul>
            </div>

            <div class="module mt_5 bg_white plug_lazyload">
                <h3 class="bg_white c_theme pl_3 line_h_36rem bor_bottom bor_gray_ddd">特殊效果样式</h3>
                <section class="mt_3 mb_3 wm_94">
                    <ul class="ovh length2 pos_rel list_h_12_rem">
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto filter_blur_5"><!-- filter_blur_* -->
                                <img src="./img/tibet-5.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">模糊效果</h6>
                            </div>
                        </li>
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto filter_gray_100"><!-- filter_gray_* -->
                                <img src="./img/tibet-5.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">黑白效果</h6>
                            </div>
                        </li>
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto scale_lr"><!-- scale_lr -->
                                <img src="./img/tibet-6.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">水平翻转</h6>
                            </div>
                        </li>
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto scale_tb"><!-- scale_tb -->
                                <img src="./img/tibet-6.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">垂直翻转</h6>
                            </div>
                        </li>
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto rotate_45"><!-- rotate_* -->
                                <img src="./img/tibet-1.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">旋转45度</h6>
                            </div>
                        </li>
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto rotate_90"><!-- rotate_* -->
                                <img src="./img/tibet-1.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">旋转90度</h6>
                            </div>
                        </li>
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto filter_hue_20"><!-- filter_hue_* -->
                                <img src="./img/tibet-1.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">色相</h6>
                            </div>
                        </li>
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto filter_brig_05"><!-- filter_brig_* -->
                                <img src="./img/tibet-1.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">明度</h6>
                            </div>
                        </li>
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto">
                                <label class="grbg_black_lt pos_abs left_0 top_0 w_100 h_in z_index_2"></label><!-- grbg_black_lt -->
                                <img src="./img/tibet-1.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">渐变 (黑色，左上)</h6>
                            </div>
                        </li>
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto">
                                <label class="grbg_white_tb pos_abs left_0 top_0 w_100 h_in z_index_2"></label><!-- grbg_white_tb -->
                                <img src="./img/tibet-1.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">渐变(白色，上下)</h6>
                            </div>
                        </li>
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto">
                                <label class="grbg_black_lmr pos_abs left_0 top_0 w_100 h_in z_index_2"></label><!-- grbg_black_lmr -->
                                <img src="./img/tibet-1.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">渐变(黑色，左中右)</h6>
                            </div>
                        </li>
                        <li class="fl ovh pos_rel cur_pointer">
                            <figure class="img_auto">
                                <label class="grbg_white_tmb pos_abs left_0 top_0 w_100 h_in z_index_2"></label><!-- grbg_white_tmb -->
                                <img src="./img/tibet-1.jpg" />
                            </figure>
                            <div class="pos_abs w_100 left_0 bottom_0 h_2rem line_h_2rem bg_black07">
                                <h6 class="text_al_c c_white">渐变(白色，上中下)</h6>
                            </div>
                        </li>
                    </ul>
                </section>
            </div>
        </ak-scrollview>
    </ak-main>

    <!----------AKjs_PopupWin Start---------->
    <dialog id="plug_ShareWin" class="dis_none w_100 bg_gray_eee"> <!--顶部位置显示的弹窗-->
        <ul class="bg_white ovh list_h_8rem verline_list length4 mb_2">
            <li class="fl pos_rel text_al_c touchstart">
                <button type="button" class="dis_block ovh w_100 mt_15rem" data-href="/page3">
                    <i class="c_wechat text_al_c fs_3rem icon-sr_weixin"></i>
                    <span class="dis_block text_al_c line_h_2rem fs_08rem">分享至微信</span>
                </button>
            </li>
            <li class="fl pos_rel text_al_c touchstart">
                <button type="button" class="dis_block ovh w_100 mt_15rem" data-href="/page3">
                    <i class="c_orange text_al_c fs_3rem icon-sr_pengyouquan"></i>
                    <span class="dis_block text_al_c line_h_2rem fs_08rem">分享至朋友圈</span>
                </button>
            </li>
            <li class="fl pos_rel text_al_c touchstart">
                <button type="button" class="dis_block ovh w_100 mt_15rem" data-href="/page3">
                    <i class="c_qq text_al_c fs_3rem icon-sr_qq"></i>
                    <span class="dis_block text_al_c line_h_2rem fs_08rem">分享至QQ</span>
                </button>
            </li>
            <li class="fl pos_rel text_al_c touchstart">
                <button type="button" class="dis_block ovh w_100 mt_15rem" data-href="/page3">
                    <i class="c_weibo text_al_c fs_3rem icon-sr_weibo"></i>
                    <span class="dis_block text_al_c line_h_2rem fs_08rem">分享至微博</span>
                </button>
            </li>
        </ul>
        <button type="button" class="w_100 h_32rem fs_12rem bg_white c_theme">取消</button>
    </dialog>
    <!----------AKjs_PopupWin End---------->

    <ak-footer data-display="false"></ak-footer>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域

    /*-----------------------------------------------AKjs_SelectOption 使用方法-------------------------------------------*/
    $(function() {
        $(".plug_select").AKjs_SelectOption({
            active: "bg_theme c_white", //下拉列表被选中时样式
            boxheight: 5, //下拉框展开后的列表区域的高度 (设置默认显示的列表数量)
            speed: 300, //下拉框展开和折叠毫秒时间
            callback:function(ele,list,val,text){ //初始化回调
                //console.log(ele);
                //console.log(list);
                //console.log(val);
                //console.log(text);
            },
            clickback:function(flag,ele,list,val,text){ //点击回调（flag获取选中状态）
                if (flag) {
                    console.log(ele);
                    console.log(list);
                    console.log(val);
                    console.log(text);
                } else {
                    console.log(ele);
                    console.log(list);
                }
            }
        });
    });

    /*-----------------------------------------------AKjs_Paginator  使用方法-------------------------------------------*/
    $(function() {
        $("#plug_page").AKjs_Paginator({
            totalPages: 20, //设置分页的总页数
            totalCounts: 200, //设置分页的总条目数
            pageSize: 10, //设置每一页的条目数
            currentPage: 1, //设置当前的页码
            visiblePages: 3, //设置最多显示的页码数
            disableClass: 'disabled', //设置首页，上一页，下一页，末页的“禁用状态”样式
            activeClass: 'bor_theme bg_theme c_white cur_default', //设置当前页码样式
            //first_text: '首页', //设置“首页”的文字
            prev_text: '<i class="arrow-left"><\/i>上一页', //设置“上一页”的文字
            next_text: '下一页<i class="arrow-right"><\/i>', //设置“下一页”的文字
            //last_text: '末页', //设置“末页”的文字
            onPageChange: function (n,type,ele) { //回调入口（当前的页码，回调状态，元素）
                if (type == "init") { //初始化回调状态
                    console.log(ele);
                } else if (type == "change") { //点击后回调状态
                    console.log(n);
                    console.log(type);
                    console.log(ele);
                }
            }
        });
    });

    /*-----------------------------------------------AKjs_ReadMore 使用方法-------------------------------------------*/
    $(function() {
        $('.plug_readmore').AKjs_ReadMore({
            speed: 500, //展开折叠毫秒速度
            maxHeight: 200, //被隐藏更多的内容时的高度（px）
            heightMargin: 16, //以像素为单位，以避免倒塌是比仅稍大块了maxHeight
            moreLink: '<button class="bg_white c_gray_333 w_100 h_36rem bor_top bor_gray_ddd">查看更多 <i class="icon-ln_xiangxia"></i></button>', //展开按钮HTML
            lessLink: '<button class="bg_white c_gray_333 w_100 h_36rem bor_top bor_gray_ddd">收起内容 <i class="icon-ln_xiangshang"></i></button>', //收起按钮HTML
            startOpen: false, //不要立即截断，开始在全开位置
            afterToggle: function(trigger, element, expanded) { //称为后，该块被折叠或展开
                if(!expanded) {
                    $("#ak-scrollview").animate({
                        scrollTop: element.offset().top + $("#ak-scrollview").scrollTop() - element.next("button").height()
                    }, {duration: 500 } );
                }
            },
            beforeToggle: function(trigger, element, expanded) { //称为或多或少链接被点击后，但之前的块被折叠或展开
                if(!expanded) {
                }
            }
        });
    });

    /*-----------------------------------------------AKjs_Vticker 使用方法-------------------------------------------*/
    $(function() {
        $('.plug_vticker').AKjs_Vticker({
            showItems : 4, //显示多少行
            pause : 3000, //滚动间隔，单位为毫秒
            speed : 500, //每次滚动持续时间，单位为毫秒
            mousePause : false, //鼠标悬停是否停止滚动
            direction : "up", //滚动方向，可选 ‘up’ / ‘down’
            isPaused: false, //默认是否暂停
            height: 0, //容器高度，默认为 0，即根据 showItems 个数自动计算
            CallBack: function(ele) {
                //console.log(ele);
            }
        });
    });

    /*-----------------------------------------------AKjs_TypeIt 使用方法-------------------------------------------*/
    $(function() {
        $(".plug_TypeIt").AKjs_TypeIt({
            strings: [
                "欢迎使用AKjs移动端前端UI框架。",
                "AKjs移动端插件是一个基于JQuery的一套构建用户界面的前端框架插件里包含着移动端常用的功能效果以及简单明亮的CSS样式库对IOS和安卓系统的微站兼容性很完美。"
            ],
            typeSpeed: 10, //打字速度
            backDelay: 50, //删除文字速度
            contentType: 'html', // html or text
            loop: true, //是否重复循环 （true,false）
            callback: function(fun){ //结束后的回调
                //console.log("已结束")
            },
            preString: function(array) {
                //console.log("准备就绪")
            },
            onString: function(array) {
                //console.log("进行中")
            }
        });
    });

    /*-----------------------------------------------AKjs_Template 使用方法-------------------------------------------*/
    $(function() {
        var list_data = [
            {
                id: 1,
                Image: "<img src=\"./img/tibet-1.jpg\">",
                Title: "产品名称001",
                Price: "￥400.00",
                Content: ['01', '该产品的简介和描述该产品的简介和描述该产品的简介和描述']
            },
            {
                id: 2,
                Image: "<img src=\"./img/tibet-2.jpg\">",
                Title: "产品名称002",
                Price: "￥500.00",
                Content: ['02', '该产品的简介和描述该产品的简介和描述该产品的简介和描述']
            },
            {
                id: 3,
                Image: "<img src=\"./img/tibet-3.jpg\">",
                Title: "产品名称003",
                Price: "￥250.00",
                Content: ['03', '该产品的简介和描述该产品的简介和描述该产品的简介和描述']
            }
        ];
        $(".plug_for").AKjs_Template(list_data, {
            callback: function (ele,ret) {
                console.log(ele); //获取元素
                console.log(ret); //获取数组元素
            },
            getContent: function (str) {
                return this.data.Content.join(str); //子数据设置
            }
        });
    });

    /*-----------------------------------------------AKjs_Lazyload 使用方法-------------------------------------------*/
    $(function() {
        $(".plug_lazyload img").AKjs_Lazyload({ //对所有的图片懒加载
            scroll: $("#ak-scrollview"), //滚动区域的容器
            scrollTop: 100, //设置初始化滚动条位置（当滚动条滚动到当前设置的位置时所有效果将进行初始化）
            Img_Effect: "fadeIn", //图片加载动画效果
            Img_LoadStyle: "loading01", //图片加载之前显示的Loading效果 （loading01~05）注：Img_Effect，Img_LoadStyle，Img_Error 三个参数是图片懒加载专用参数；
            Img_Error: "./img/noimage.png", //图片加载失败时默认显示图片URL
            Callback: function(ele) { //初始化回调入口
                //console.log(ele);
            },
            Scrollback: function(ele,scroll) { //页面滚动后的回调
                //console.log(ele);
            }
        });
    });

    /*-----------------------------------------------AKjs_Popupwin (分享功能) 使用方法-------------------------------------------*/
    $(function() {
        $("#plug_Share").bind("click", function (c) {
            AKjs_Popupwin({
                dom: "#plug_ShareWin", //弹窗内容的布局
                position: "bottom", //位置类型(top，bottom，left，right，middle)
                effectIn: "slideInUp ani_05s", //弹窗显示效果 (css动画库：akjs.animate.css)
                effectOut: "slideOutDown ani_05s", //弹窗消失效果 (css动画库：akjs.animate.css)
                hasMask: true, //是否开启遮罩层背景 (true / false)
                maskPosition: 4, //Mask的z-index数值
                closeBtn: ".ak-mask", //关闭弹窗按钮的Class名
                OneButton: c.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                toggleIcon: "", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                callback:function (ele,toggle) { //通过回调获取弹窗显示后的以上参数
                    if (toggle) { //判断是否弹出弹窗
                        console.log($(ele[0].dom)); //获取当前的弹窗元素
                        $(ele[0].dom).find("button").click(function () {
                            $(".ak-mask").click();
                        });
                    }
                }
            });
        });
    });

    /*-----------------------------------------------AKjs_Marquee 使用方法-------------------------------------------*/
    $(function() {
        $('.plug_marquee').AKjs_Marquee({
            direction: 'up', //滚动方向设置 （可选 left / rplug_marqueeight / up / down）
            loop: -1, //是否重复循环 （0 = 不重复，-1 = 重复）
            scrolldelay: 0, //每次重复之前的延迟
            scrollamount: 10, //滚动速度 （数字越大速度越快）
            circular: true, //无缝滚动，如果为 false，则和 marquee 效果一样
            drag: true, //鼠标拖动 (true / false)
            runshort: true, //内容不足是否滚动 (true / false)
            hoverstop: true, //鼠标悬停暂停 (true / false)
            inverthover: false, //反向，即默认不滚动，鼠标悬停滚动 (true / false)
            xml: false //加载 xml 文件 (false 或 xml:'text.xml')
        });
    });

    /*-----------------------------------------------AKjs_QRcode 使用方法-------------------------------------------*/
    $(function() {
        $(".plug_qrcode").AKjs_QRcode({
            width: 200, //宽度
            height:200, //高度
            background: "#ffffff", //背景色
            foreground: "#000000", //前景色
            text: "http://m.baidu.com" //任意内容
        });
    });

    /*-----------------------------------------------AKjs_NavScroll 使用方法-------------------------------------------*/
    $(function() {
        $(".plug_tabs_find").AKjs_NavScroll({
            content_dom: ".plug_tabs_findview", //内容区域的元素 （该参数是菜单区域使用屏幕固定时需要分开布局结构后指定元素的方法）
            line_style: "dis_block pos_abs bor_top2 bor_theme", //选中状态的线条样式设置
            active_corlor: "c_theme",  //选中状态的文字颜色
            ClickCallback: function(ele,index) { //回调获取点击后的元素和元素的index
                console.log(ele);
            }
        });
    });

    /*-----------------------------------------------AKjs_Circliful 使用方法-------------------------------------------*/
    $(function() {
        $('.plug_circliful').AKjs_Circliful({
            animationStep: 0.2 //动画毫秒设置
        });
        /*
        data-dimension === 整个圆形的宽高
        data-text === 圆形里的大标题
        data-info === 圆形里的小标题
        data-width === 当前参数进度条边框宽度设置
        data-prog_color === 当前参数进度条边框颜色设置
        data-font_size  === 圆形里的大标题文字大小（px）
        data-percent  === 当前参数设置（百分比）
        data-font_color === 大标题和小标题文字颜色设置
        data-bg_color === 整个圆形的边框颜色
        data-fill_color === 里面填充颜色设置
        data-spacing_color === 整个圆形的边框颜色
        data-type="spacing" === 饼图类型设置 （half, spacing）；空值代表默认类型
        */
    });

    /*-----------------------------------------------AKjs_TimeAxis 使用方法-------------------------------------------*/
    $(function() {
        $(".plug_timeaxis").AKjs_TimeAxis({
            firstbox: "bg_theme", //第一个圆框的样式
            boxsize: "3rem", //圆框大小设置
            textstyle: "fs_06rem c_white", //圆框内的文字样式
            data: json_TimeAxis, //Json获取data数据(data.js)
            callback:function(ele){ //初始化回调入口
            }
        });
    });

    /*-----------------------------------------------AKjs_Print 使用方法-------------------------------------------*/
    $(function(){
        $(".plug_print").click(function(){
            $("#ak-scrollview").AKjs_Print({
                noPrint: ".plug_print", //打印过滤元素设置 （设置指定元素打印区域不显示该元素）
                iframe : true, //是否打印功能启动在本窗口中运行？（本窗: true, 新窗: false）
                callback:function(ele){ //打印页面回调入口（获取打印区域的元素）
                    ele.find("main").addClass("h_100");
                    ele.find("#ak-scrollview").addClass("h_100");
                    $(".ak-Loader").remove();
                    $(".ak-mask").remove();
                }
            });
        });
    });

    /*-----------------------------------------------AKjs_EchartsRun 使用方法-------------------------------------------*/
    $(function() {
        $("#plug_echarts1").AKjs_EchartsRun({
            width: "100%", //宽度
            height: 320, //高度
            option: { //Echarts的option数据结构（Echarts官网：http://echarts.baidu.com/examples/）
                title: {
                    text: 'Echarts1',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['使用情况', '当前数量']
                },
                toolbox: {
                    show: false,
                    feature: {
                        dataView: {
                            readOnly: false
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                dataZoom: {
                    show: false,
                    start: 0,
                    end: 100
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: (function() {
                        var now = new Date();
                        var res = [];
                        var len = 10;
                        while (len--) {
                            res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                            now = new Date(now - 2000);
                        }
                        return res;
                    })()
                }],
                yAxis: [{
                    type: 'value',
                    //scale: true,
                    name: '使用情况',
                    max: 20,
                    min: 0,
                    boundaryGap: [0.2, 0.2]
                }, {
                    type: 'value',
                    scale: true,
                    name: '当前数量',
                    min: 0,
                    boundaryGap: [0.2, 0.2]
                }],
                series: [{
                    name: '当前数量',
                    type: 'line',
                    yAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            color:'#d71b1c',
                            lineStyle:{
                                color:'#d71b1c'
                            }
                        }
                    },
                    data: (function() {
                        var res = [];
                        var len = 10;
                        while (len--) {
                            res.push(null);
                        }
                        return res;
                    })()
                }, {
                    name: '使用情况',
                    type: 'line',
                    smooth:true,
                    // itemStyle areaStyle 成为面积图的关键。
                    itemStyle: {
                        normal: {
                            color:'#79c34a',
                            areaStyle: {
                                type: 'default'
                            },
                            lineStyle:{
                                color:'#79c34a'
                            }
                        }
                    },
                    areaStyle: {// 实现蓝白渐变色
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(121,195,74,0.8)'
                            }, {
                                offset: 1,
                                color: 'rgb(255,255,255)'
                            }])
                        }
                    },
                    data: (function() {
                        var res = [];
                        var len = 0;
                        while (len < 10) {
                            res.push(null);
                            len++;
                        }
                        return res;
                    })()
                }]
            },
            callback:function(myChart,option){ //初始化回调入口
                setInterval(function() {
                    axisData = (new Date()).toLocaleTimeString().replace(/^\D*!/, '');
                    var data0 = option.series[0].data;
                    var data1 = option.series[1].data;
                    data0.shift();
                    data0.push(Math.round(Math.random() * 10000));
                    data1.shift();
                    data1.push(Math.round(Math.random() * 20));
                    option.xAxis[0].data.shift();
                    option.xAxis[0].data.push(axisData);
                    myChart.setOption(option);
                }, 1000);
            }
        });
    });

    $(function() {
        $("#plug_echarts2").AKjs_EchartsRun({
            width: "100%", //宽度
            height: 320, //高度
            option: { //Echarts的option数据结构（Echarts官网：http://echarts.baidu.com/examples/）
                title: {
                    text: 'Echarts2',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['使用情况', '当前数量']
                },
                toolbox: {
                    show: false,
                    feature: {
                        dataView: {
                            readOnly: false
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                dataZoom: {
                    show: false,
                    start: 0,
                    end: 100
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    data: (function() {
                        var now = new Date();
                        var res = [];
                        var len = 10;
                        while (len--) {
                            res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                            now = new Date(now - 2000);
                        }
                        return res;
                    })()
                }],
                yAxis: [{
                    type: 'value',
                    scale: true,
                    name: '使用情况',
                    max: 20,
                    min: 0,
                    boundaryGap: [0.2, 0.2]
                }, {
                    type: 'value',
                    scale: true,
                    name: '当前数量',
                    max: 1200,
                    min: 0,
                    boundaryGap: [0.2, 0.2]
                }],
                series: [{
                    name: '当前数量',
                    type: 'bar',
                    xAxisIndex: 0,
                    yAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            color:'#CCCCCC',
                            lineStyle:{
                                color:'#CCCCCC'
                            }
                        }
                    },
                    data: (function() {
                        var res = [];
                        var len = 10;
                        while (len--) {
                            res.push(null);
                        }
                        return res;
                    })()
                }, {
                    name: '使用情况',
                    type: 'line',
                    smooth:true,
                    // itemStyle成为面积图的关键。
                    itemStyle: {
                        normal: {
                            color:'#79c34a',
                            areaStyle: {
                                type: 'default'
                            },
                            lineStyle:{
                                color:'#79c34a'
                            }
                        }
                    },
                    areaStyle: {// 实现蓝白渐变色
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(121,195,74,0.8)'
                            }, {
                                offset: 1,
                                color: 'rgb(255,255,255)'
                            }])
                        }
                    },
                    data: (function() {
                        var res = [];
                        var len = 0;
                        while (len < 10) {
                            res.push(null);
                            len++;
                        }
                        return res;
                    })()
                }]
            },
            callback:function(myChart,option){ //初始化回调入口
                setInterval(function() {
                    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
                    var data0 = option.series[0].data;
                    var data1 = option.series[1].data;
                    data0.shift();
                    data0.push(Math.round(Math.random() * 1000));
                    data1.shift();
                    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
                    option.xAxis[0].data.shift();
                    option.xAxis[0].data.push(axisData);
                    myChart.setOption(option);
                }, 2000);
            }
        });
    });

</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
* ak-header和ak-footer元素的data-display值是隐藏和显示APP的头部区域和底部菜单区域 (true / false)；
ak-main和ak-scrollview元素的data-bounce值是滚动区域是否开启ios弹性效果的功能 (true / false)；
button元素的data-back="true"值是识别为该按钮是返回键的意思
//注：template，ak-header，ak-footer，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-header>头部区域</ak-header>
    <ak-main>
        <ak-scrollview>
            <div>中间内容</div>
        </ak-scrollview>
        <dialog>弹窗代码</dialog>
    </ak-main>
    <ak-footer>底部区域</ak-footer>
</template>
<script>
    //编写当前页面的脚本代码区域
</script>
<style>
    //覆盖当前界面的样式区域
</style>
-->